<!DOCTYPE html>
<html>
<head>
    <title>鹿鹿泽会员肖像</title>
    <link rel="stylesheet" href="../static/css/minghu.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
</head>
<body style="background-color: rgb(254, 254, 255);">
    {% include 'show_ins_info.html' %}
    <hr>
    <h2>鹿鹿泽会员肖像</h2>    
    <hr>
    <div>
        <div id="totalTxt" style="display: block;margin-bottom:12px;line-height: 28px;text-align: center;font-size: 12px;"></div>
        <hr style="border-top:1px dashed;">
        <div id="srcChart"></div>
        <div id="ageChart"></div>
        <div id="indChart"></div>
        <div id="occChart"></div> 
    </div>


    <script src="../static/js/common.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    
    <script>
        let insName;
        let insId;
        let insRole;
        let insList;
        
        document.addEventListener('DOMContentLoaded',function(){
            // loginCheck();        
            const insInfo=hideInsSelectBlockAndGetInsInfo();
            insId=insInfo.sessionInsId;
            insName=insInfo.sessionInsName;
            insRole=insInfo.sessionInsRole;
            // console.log(insName)
            //教练角色不允许进入该页面，返回Index
            if(insRole==='ins'){
                window.location.replace('./index');
            }

            getAllStat();
         

        });

        function getAllStat(){
            fetch('/get_all_cus_stat')
            .then(response=>response.json())
            .then(data=>{
                if(data['res']==='ok'){
                    // console.log('data:',data['data']);
                    showTotalText(data['data']['cus_sex']);
                    showSrcChart(data['data']['src_stat']);
                    showAgeChart(data['data']['cus_stat']);
                    showIndustryChart(data['data']['industry_stat']);
                    showOccChart(data['data']['occu_stat']);
                }
            })
            .catch(error=>console.error(error))
        }

        function showSrcChart(data){
            const chartContainer=document.getElementById('srcChart');
            chartContainer.style.width='380px';
            chartContainer.style.height='200px';

            const mychart = echarts.init(document.getElementById('srcChart'));


            const formattedData = data.map(function(item) {
            return {
                name: item[0],
                value: item[1],
                percentage: (parseFloat(item[2]) * 100).toFixed(2) + '%' // 转换为百分比格式并保留两位小数
            };
        });
            

            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '客户来源',
                    left: 'left',
                    textStyle: {
                        color: '#bd8333', // 标题颜色
                        fontSize: 14 // 标题字体大小
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return params.name + '<br/>' + 
                            '值: ' + params.value + '<br/>' +
                            '百分比: ' + params.data.percentage;
                    }
                },
                legend: {
                    show:false,
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '客户来源',
                        type: 'pie',
                        radius: '50%',
                        data: formattedData,
                        emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            formatter: '{b}: {c}人 ({d}%)' // 显示名称、值和百分比
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表
            mychart.setOption(option);
        }

        function showTotalText(data){
            const txtBox=document.getElementById('totalTxt');
            let m;
            let f;
            let t;
            data.forEach(item=>{
                if(item[1]==='合计'){
                    t=parseInt(item[0]);
                }
                if(item[1]==='男'){
                    m=parseInt(item[0]);
                }
                if(item[1]==='女'){
                    f=parseInt(item[0]);
                }
            })


            txtBox.innerHTML=`工作室客户共${t}人。<br>女${f}人，占比${(f*100/t).toFixed(2)}%；<br>男${m}人，占比${(m*100/t).toFixed(2)}%。`;
        }

        function showAgeChart(data){
            // console.log('data:',data)
            //年龄
            const chartContainer=document.getElementById('ageChart');
            chartContainer.style.width='380px';
            chartContainer.style.height='200px';            

            // 初始化图表
            const chart = echarts.init(chartContainer);

            // 定义横坐标数据
            // const xAxisData = ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
            const xAxisData=data.map(item=>item[0]);
            // 定义总数数据
            // let totalData = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 11, 10, 9, 8, 7, 6, 5, 4];
            const totalData=data.map(item=>item[1]);
            const dataLabels = data.map(item => item[2]);

            // 配置图表选项
            const options = {
                title: {
                    text: '会员年龄段',
                    textStyle: {
                        color: '#bd8333', // 标题颜色
                        fontSize: 14 // 标题字体大小
                    }
                },
                xAxis: {
                    type: 'category',
                    name:'年龄段',
                    data: xAxisData,
                    axisLabel: {
                        //color: '#bd8333', // 坐标轴文字颜色
                        fontSize: 10 ,// 坐标轴文字大小
                        rotate:30,
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '人数',
                        position: 'left',
                        axisLabel: {
                            //color: 'blue', // 坐标轴文字颜色
                            fontSize: 10 // 坐标轴文字大小
                        }
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: totalData,
                        itemStyle: {
                            color: '#bd8333' // 设置柱状图的颜色
                        },
                        label: {
                            show: true,
                            position: 'top',
                            fontSize:8,
                            formatter: function (params) {
                                return params.value === 0 ? '' : `${(dataLabels[params.dataIndex]*100).toFixed(2)}%`;
                            }
                        }
                    }
                ]
            };

            // 使用配置项生成图表
            chart.setOption(options);

        }

        function showIndustryChart(data){
            //年龄
            const chartContainer=document.getElementById('indChart');
            chartContainer.style.width='380px';
            chartContainer.style.height='200px';
            
            // const firstEle=data.shift();
            // data.push(firstEle);

            // 初始化图表
            const chart = echarts.init(chartContainer);

            // 定义横坐标数据
            // const xAxisData = ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
            const xAxisData=data.map(item=>item[0]);
            // 定义总数数据
            // let totalData = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 11, 10, 9, 8, 7, 6, 5, 4];
            const totalData=data.map(item=>item[1]);
            const dataLabels = data.map(item => item[2]);

            // 配置图表选项
            const options = {
                title: {
                    text: '行业分布',
                    textStyle: {
                        color: '#bd8333', // 标题颜色
                        fontSize: 14 // 标题字体大小
                    }
                },
                xAxis: {
                    type: 'category',
                    name:'行业',
                    data: xAxisData,
                    axisLabel: {
                        //color: '#bd8333', // 坐标轴文字颜色
                        rotate:45,
                        fontSize: 10 // 坐标轴文字大小
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '人数',
                        position: 'left',
                        axisLabel: {
                            //color: 'blue', // 坐标轴文字颜色
                            fontSize: 10 // 坐标轴文字大小
                        }
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: totalData,
                        itemStyle: {
                            color: '#bd8333' // 设置柱状图的颜色
                        },
                        label: {
                            show: true,
                            position: 'top',
                            fontSize:7,
                            formatter: function (params) {
                                return params.value === 0 ? '' : `${(dataLabels[params.dataIndex]*100).toFixed(2)}%`;
                            }
                        }
                    }
                ]
            };

            // 使用配置项生成图表
            chart.setOption(options);

        }

        function showOccChart(data){
            //年龄
            const chartContainer=document.getElementById('occChart');
            chartContainer.style.width='380px';
            chartContainer.style.height='200px';
            
            // const firstEle=data.shift();
            // data.push(firstEle);

            // 初始化图表
            const chart = echarts.init(chartContainer);

            // 定义横坐标数据
            // const xAxisData = ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
            const xAxisData=data.map(item=>item[0]);
            // 定义总数数据
            // let totalData = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 11, 10, 9, 8, 7, 6, 5, 4];
            const totalData=data.map(item=>item[1]);
            const dataLabels = data.map(item => item[2]);

            // 配置图表选项
            const options = {
                title: {
                    text: '职业分布',
                    textStyle: {
                        color: '#bd8333', // 标题颜色
                        fontSize: 14 // 标题字体大小
                    }
                },
                xAxis: {
                    type: 'category',
                    name:'职业',
                    data: xAxisData,
                    axisLabel: {
                        //color: '#bd8333', // 坐标轴文字颜色
                        // rotate:45,
                        fontSize: 10, // 坐标轴文字大小
                        rotate:45
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '人数',
                        position: 'left',
                        axisLabel: {
                            //color: 'blue', // 坐标轴文字颜色
                            fontSize: 10 // 坐标轴文字大小
                        }
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: totalData,
                        itemStyle: {
                            color: '#bd8333' // 设置柱状图的颜色
                        },
                        label: {
                            show: true,
                            position: 'top',
                            fontSize:8,
                            formatter: function (params) {
                                return params.value === 0 ? '' : `${(dataLabels[params.dataIndex]*100).toFixed(2)}%`;
                            }
                        }
                    }
                ]
            };

            // 使用配置项生成图表
            chart.setOption(options);

        }


    </script>
  
</body>
</html>
